<!-- 随手拍管理 -->
<template>
  <div>
    <CommonSearch @search="query" @reset="reset">
      <el-col :span="8">
        <el-form-item label="标题">
          <el-input
            v-model="queryParams.condition.title"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="审核状态">
          <DictSelect
            v-model="queryParams.condition.status"
            :defaultOptions="options.approveStatus"
            placeholder="请选择状态"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="随手拍类型">
          <QueryCategoryTree
            v-model="queryParams.condition.type"
            cacheValue="SNAPSHOT_TYPE"
            :payload="{ dictType: 'SNAPSHOT_TYPE' }"
          />
        </el-form-item>
      </el-col>
    </CommonSearch>

    <el-row class="cardMiniBar">
      <el-col :span="24">
        <div class="fr">
          <el-button @click="() => approve()" size="small">批量审核</el-button>
          <el-button @click="handlerDelete" size="small">批量删除</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="cardBody">
      <edu-table
        ref="mainTable"
        :data="tableList"
        :pageSize="queryParams.pageSize"
        :pageNum="queryParams.pageNum"
        :total="queryParams.total"
        @page-change="handleCurrentChange"
        :order="true"
        :selection="true"
      >
        <el-table-column label="标题" prop="title" />
        <el-table-column label="类型" prop="typeName" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="位置" prop="location" />
        <el-table-column label="积分奖励" prop="score" />
        <el-table-column label="作者" prop="createdBy" />
        <el-table-column label="创建时间" prop="createdTime" />
        <el-table-column label="审核状态" prop="status">
          <template slot-scope="scope">
            {{ renderOption(scope.row.status, "approveStatus") }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="170px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="view(scope.row)"
              size="small"
            >
              查看
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status == 0"
              @click="edit(scope.row)"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.status == 0"
              @click="handlerDelete(scope.row)"
              size="small"
            >
              删除
            </el-button>

            <el-button
              type="text"
              v-if="scope.row.status == 0"
              @click="approve(scope.row)"
              size="small"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </edu-table>
    </div>

    <edu-dialog
      :title.sync="dialogConfig.title"
      :visible.sync="dialogConfig.showDialog"
      @close="closeDialog(dialogConfig)"
      width="70%"
      height="650px"
    >
      <el-form
        ref="dialogForm"
        :model="dialogConfig.formData"
        :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
        label-width="230px"
        :disabled="dialogConfig.action === 'view'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="dialogConfig.formData.title" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="随手拍类型" prop="type">
              <QueryCategoryTree
                v-model="dialogConfig.formData.type"
                cacheValue="SNAPSHOT_TYPE"
                :payload="{ dictType: 'SNAPSHOT_TYPE' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片" prop="fileIdList">
              <Upload
                v-model="dialogConfig.formData.fileIdList"
                ref="uploadComp"
                :limit="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置" prop="location">
              <el-input v-model="dialogConfig.formData.location" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="摘要" prop="resume">
              <el-input v-model="dialogConfig.formData.resume" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input
                v-model="dialogConfig.formData.description"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button>
          <el-button type="primary" @click="handlerSubmit"> 提交 </el-button>
        </template>
      </span>
      <span slot="buttons" v-else>
        <template>
          <el-button @click="closeDialog(dialogConfig)">返回</el-button>
        </template>
      </span>
    </edu-dialog>

    <ApprovalBox :url="api.approveSnapshot" ref="approvalBox" @done="query" />
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import {
  querySnapshotList,
  updateSnapshot,
  approveSnapshot,
  deleteSnapshot,
} from "@/api/anyPhoto";

export default {
  mixins: [mixins],
  data() {
    return {
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      dialogConfig: {
        title: "",
        showDialog: false,
        action: "add",
        formData: {},
        rules: {},
        fileList: [],
      },
      api: {
        approveSnapshot: approveSnapshot,
      },
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      // 查询列表
      this.query();
    },
    // 查询
    async query() {
      let { returnObj } = await querySnapshotList(this.queryParams);
      this.tableList = returnObj.list;
      this.queryParams.total = returnObj.total;
      this.queryParams.pageSize = returnObj.pageSize;
    },
    // 重置
    reset() {
      for (var key in this.queryParams.condition) {
        this.queryParams.condition[key] = "";
      }
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.query();
    },
    // 分页
    handleCurrentChange(row) {
      this.queryParams.pageSize = row.pageSize;
      this.queryParams.pageNum = row.pageNum;
      this.query();
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 修改
    async edit(row) {
      this.dialogConfig.title = "编辑";
      this.dialogConfig.action = "edit";
      this.dialogConfig.formData = utils.clone(row);
      this.openDialog(this.dialogConfig);
      this.$nextTick(() => {
        this.$refs.uploadComp.init();
      });
    },
    // 保存提交
    handlerSubmit() {
      let params = {
        ...this.dialogConfig.formData,
      };
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          updateSnapshot(params).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.closeDialog(this.dialogConfig);
            this.query();
          });
        }
      });
    },
    // 查看
    view(row) {
      this.dialogConfig.title = "查看";
      this.dialogConfig.action = "view";
      this.dialogConfig.formData = utils.clone(row);
      this.$nextTick(()=>{
        this.$refs.uploadComp.init()
      })
      this.openDialog(this.dialogConfig);
    },
    // 审核
    async approve(row) {
      if (!row) {
        let ids = this.$refs.mainTable.getCheckData().map((c) => c.id);

        if (!ids || ids.length == 0) {
          this.$message({
            type: "warning",
            message: "请勾选数据",
          });
          return;
        }
        this.$refs.approvalBox.open(ids);
      } else {
        this.$refs.approvalBox.open([row.id]);
      }
    },
    // 删除
    async handlerDelete(row) {
      let idField = "id";
      if (row && row[idField]) {
        this.batchDelete(deleteSnapshot, idField, [row[idField]]);
      } else {
        this.batchDelete(deleteSnapshot, idField);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
